<template>
	<div class="article-item-box">
    <div class="item-right">
      <img :src="itemData.coverpic" :alt="itemData.title">
    </div>
    <div class="item-left ml10">
      <h3>{{itemData.title}}</h3>
      <div class="summary">{{itemData.summary}}</div>
      <p class="meta-data">作者:{{ itemData.author }}&nbsp; 时间:{{itemData.createTime}}&nbsp; 浏览量:{{itemData.views}}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,PropType } from "vue";

interface ItemDataProps {
	title: string;
	summary?: string;
	author: string;
	coverpic: string;
	createTime: string;
  views: number|string;
}

const ArticleItem = defineComponent({
	// 已启用类型推断
  props:{
    itemData:{
      type: Object as PropType<ItemDataProps>,
      required: true
    }
  }
});

export default ArticleItem;
</script>

<style lang="scss">
  .article-item-box{
    height: 130px;
    display: flex;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(28,31,33,.1);
    padding: 4px 0;
    transition: background-color .5s;
    &:hover {
      background: rgb(236 234 234 / 40%);
    }
    .item-left {
      flex: 1;
    }

    .item-right {
      width: 120px;
      width: 100px;
      img {
        width: 100%;
        height: 120px;
        border-radius: 5px;
      }
    }
    .summary {
      color: #888;
      font-size: 14px;
      margin: 10px 0;
    }
    .meta-data{
      color: #888;
      font-size: 14px;
    }

  }
</style>